import React,{Component} from "react";
import { Form, Upload, message, Button } from 'antd';
import { PictureFilled  } from '@ant-design/icons';
import {get} from"../../../utils/get"

export default class AliyunOSSUpload extends Component {
    state = {
        OSSData: {},
        // value:[]
    };
    async componentDidMount() {
        await this.init();
    }

    init = async () => {
        try {
            const OSSData = await this.mockGetOSSData();
            // let value = this.props.value;
            // console.log(OSSData,"ossdata");
            this.setState({
                OSSData,
                // value
            });
        } catch (error) {
            message.error(error);
        }
    };
    mockGetOSSData = async (filename,uid)=>{
        const token = localStorage.getItem('TOKEN')
        let data= null;
        const res = await get('/oss/policy',token)
        // console.log(res,"res");
        if(res.data.code===0)
        {
            const {host,policy,signature,accessid,dir,expire}=res.data.data
            data={
                        dir,
                        expire,
                        host,
                        accessId:accessid,
                        policy,
                        signature
            }
        }
        else message.error(res.data.errorMsg)
        return data;
    }

    onChange = ( fileObj ) => {
        const { changeImgList } = this.props;
        const {fileList,file}=fileObj;
        if(fileList.length>6)  alert('图片数量不能超过6张')
        else if(changeImgList&&file.status!=='removed') changeImgList(fileObj.fileList);
        else console.log('我在remove');
    };

    onRemove = file =>{
        const { changeImgList,value } = this.props;
        const nfiles = value.filter(v=>v!==file);
        if(changeImgList){
            changeImgList([...nfiles]);
        }
    }

    getExtraData = file => {
        const { OSSData } = this.state;
        return {
            key: file.url,
            policy: OSSData.policy,
            OSSAccessKeyId: OSSData.accessId,
            success_action_status : '200',
            signature: OSSData.signature
        };
    };

    checkImg=(file)=>{
        const isJPEG = file.type === 'image/jpeg';
        const isJPG = file.type === 'image/jpg';
        const isPNG = file.type === 'image/png';
        const isBMP = file.type === 'image/bmp';
        const isGIF = file.type === 'image/gif';
        const isWEBP = file.type === 'image/webp';
        const isPic = isJPG || isPNG || isBMP || isGIF || isWEBP||isJPEG;
        if (!isPic) {
            message.error('请上传图片');
            return false;
        }
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
            message.error('上传图片必须小于 5MB!');
            return false;
        }
        return true;
    }

    beforeUpload = async file => {
        let canUpload = this.checkImg(file)
        if(!canUpload)  return false;
        const { OSSData } = this.state;
        const expire = OSSData.expire * 1000;
        if (expire < Date.now()) {
            await this.init();
        }
        const suffix = file.name.slice(file.name.lastIndexOf('.'));
        const filename = Date.now() + suffix;
        file.url = OSSData.dir + filename;
        return file;
    };

    render() {
        const { value } = this.props;
        const props = {
            name: 'file',
            fileList: value,
            // action: this.state.OSSData?.host,
            maxCount:6,
            action:'http://baiblog.oss-cn-guangzhou.aliyuncs.com',
            onChange: this.onChange,
            onRemove: this.onRemove,
            data: this.getExtraData,
            listType:"picture",
            beforeUpload: this.beforeUpload,
        };
        return (
            <Upload {...props}>
               <PictureFilled style={{color:'#40a9ff'}} />
            </Upload>
        );
    }
}
